<template>
  <div class="cart-page">
    <div class="cart-header">
      <span> 总数量: {{ cartStore.number }} 件 </span>
      <van-button size="mini" type="danger" @click="multipleDelItem">删除</van-button>
    </div>
    <!-- 购物车中所有的商品 -->
    <div class="items">
      <van-swipe-cell v-for="item in cartStore.items" :key="item.goodsId">
        <div class="item">
          <van-checkbox
            v-model="item.selected"
            @change="chageItemSelected(item.key, item.selected)"
          />
          <van-card
            :num="item.number"
            :price="item.price"
            :title="item.name"
            :thumb="item.pic"
          >
            <template #footer>
              <van-stepper
                v-model="item.number"
                :min="1"
                @change="itemNumChange(item.key, item.number)"
              />
            </template>
          </van-card>
        </div>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            @click="delItem(item.key)"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
    </div>
    <!-- /购物车中所有的商品 -->
  </div>
  <!-- 提交订单栏 -->
  <van-submit-bar
    :price="cartStore.price * 100"
    button-text="提交订单"
    @submit="onSubmit"
  >
    <van-checkbox v-model="allChecked">全选</van-checkbox>
  </van-submit-bar>
  <CommonTabbar />
</template>

<script setup lang="ts" name="CartPage">
import CommonTabbar from "@/components/CommonTabbar.vue";
import useCartStore from "@/stores/cart";
import { onMounted, computed } from "vue";
import { showConfirmDialog } from "vant";
const cartStore = useCartStore();
// 计算全选状态
const allChecked = computed<boolean>({
  get() {
    return cartStore.items.every((item) => item.selected);
  },
  set(val) {
    // 处理单个商品选中
    // 改变所有商品选中状态
    const itemKeys: any[] = [];
    cartStore.items.forEach((item) => {
      itemKeys.push(item.key);
    });
    chageItemSelected(itemKeys.join(","), val);
  },
});
// 点击右上角商品按钮 批量删除选中商品
const multipleDelItem = () => {
  // 删除  所有已经选中的商品
  // 得到已经选中的 商品key 存储到 数组中
  const delItemKeys: string[] = [];
  cartStore.items
    .filter((item) => item.selected)
    .forEach((item) => {
      delItemKeys.push(item.key);
    });

  delItem(delItemKeys.join(","));
};
// 删除商品 key 待删除商品的key 如果多个商品 key以字符串分割
const delItem = (key: string) => {
  // 弹出确认框
  showConfirmDialog({
    title: "商品商品",
    message: "次操作会彻底删除购物车该商品,继续吗?",
  }).then(() => {
    cartStore.delItem({
      key,
    });
  });
};

// 修改购物车商品购买梳理 key 商品key number 目前修改数量
const itemNumChange = (key: string, number: number) => {
  cartStore.addItemNum({
    key,
    number,
  });
};
// 修改购物车商品选中状态 key 商品key selected 现在修改的选中状态
const chageItemSelected = (key: string, selected: boolean) => {
  cartStore.changeItemSelected({
    key,
    selected,
  });
};
const onSubmit = () => {
  // 点击提交订单栏确定按钮
};
onMounted(() => {
  // 初始化 获取购物车接口数据
  cartStore.getCartInfo();
});
</script>

<style scoped lang="scss">
.cart-page {
  box-sizing: border-box;
  padding: 40px 10px 100px 10px;
  .cart-header {
    height: 40px;
    background-color: #fafafa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10;
  }
  .delete-button {
    height: 100%;
  }
  .item {
    display: flex;
    .van-card {
      flex: 1;
      margin-top: 0;
    }
  }
}
.van-submit-bar {
  bottom: 50px;
}
</style>
